<script setup>
import {Check, DocumentCopy, Monitor} from "@element-plus/icons-vue";
import {ref} from "vue";

// 定义组件的 Props
const props = defineProps({
  // 是否为用户消息
  isUser: {
    type: Boolean,
    default: false
  },
  // 包含头像相关属性
  Props: {
    type: Object,
    default: () => ({
      book: {
        imageSrc: ''
      }
    })
  },
  // 消息内容对象
  message: {
    type: Object,
    default: () => ({
      content: ''
    })
  },
});
const copyButtonTitle = ref('复制内容');
const copied = ref (false);
console.log(props)

// 处理 Markdown 内容
const processedContent = ref('<p>测试</p>');
const copyContent = function (){
  copied.value = true;
  copyButtonTitle.value = '已复制';
  console.log(props.message)
};
</script>

<template>
  <div class="message" :class="{ 'message-user': props.isUser }">
    <div class="avatar">
      <!--判断是否为用户-->
      <el-image class="icon" :src="props.Props.book.imageSrc" v-if="props.isUser"></el-image>
      <div v-else class="icon" :class="{ 'assistant': !props.isUser }">
        <el-icon>
          <Monitor/>
        </el-icon>
      </div>
    </div>
    <div class="content">
      <div class="text-container">
        <button v-if="props.isUser" class="user-copy-button" @click="copyContent" :title="copyButtonTitle">
          <el-icon v-if="!copied"><DocumentCopy /></el-icon>
          <el-icon v-else><Check /></el-icon>
        </button>
        <div class="text" ref="contentRef" v-if="props.isUser">
          {{ props.message.content }}
        </div>
        <div class="text markdown-content" ref="contentRef" v-else v-html="processedContent"></div>
      </div>
      <div class="message-footer" v-if="!props.isUser">
        <button class="copy-button" @click="copyContent" :title="copyButtonTitle">
          <el-icon v-if="!copied"><DocumentCopy /></el-icon>
          <el-icon  v-else><Check/></el-icon>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.message-user {
  flex-direction: row-reverse;
}

.avatar {
  width: 40px;
  height: 40px;
}

.icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.icon.assistant {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 50%;
}

.content {
  flex: 1;
  max-width: calc(100% - 50px);
}

.text-container {
  position: relative;
  padding: 10px;
  border-radius: 8px;
}

.message-user .text-container {
  background-color: #e6f7ff;
}

.text-container:not(.message-user) {
  background-color: #f5f5f5;
}

.user-copy-button,
.copy-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.user-copy-button:hover,
.copy-button:hover {
  opacity: 1;
}

.text {
  word-break: break-word;
}

.markdown-content p {
  margin: 0;
}

.message-footer {
  text-align: right;
  margin-top: 5px;
}
.message {
  display: flex;
  margin: 10px 0;
  padding: 10px;
  gap: 10px;
}

</style>